<template>
    <div>
        <h3>权限管理</h3>
        <template>
            <el-select aria-required="true" v-model="value" @change="changeHandle" clearable placeholder="请选择角色">
                <el-option v-for="item in roles" :key="item.id" :label="item.roleName" :value="item.id">
                </el-option>
            </el-select>
        </template>
        <br />
        <br />
        <el-tree :data="permissions" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps"
            :render-content="renderContent" @node-expand="handNodeExpand" :default-checked-keys="defaultCheckedKeys">
        </el-tree>
        <br />
        <el-button type="primary" @click="submit">提交</el-button>
    </div>
</template>

<script>
    export default {
        created() {
            this.getPermissions();
        },
        data() {
            return {
                roles: [],
                value: null,
                permissions: [],
                defaultExpandAll: false,
                defaultCheckedKeys: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rolePermissionsForm: {
                    id: null,
                    rules: [],
                }
            }
        },
        mounted() {
            this.changeCss();
        },
        methods: {
            async getPermissions() {
                const { data: roleRes } = await this.$http.get("/sys/role/list");
                this.roles = roleRes.data;
                const { data: permissionRes } = await this.$http.get("/sys/permission/list");
                this.permissions = permissionRes.data;
            },
            async changeHandle() {
                if (this.value) {
                    this.defaultCheckedKeys = [];
                    const { data: res } = await this.$http.get("/sys/role/details/" + this.value);
                    if (res.data.allEndRules) {
                        this.defaultCheckedKeys = res.data.allEndRules;
                    }
                }
                this.getPermissions();
            },
            async submit() {
                let selectPermissions = [];
                this.getIds(this.$refs.tree.getCheckedNodes(), selectPermissions);
                if (this.value === null || this.value === "" || selectPermissions.length == 0) {
                    this.$message.error("角色或权限不能为空!");
                    return;
                }
                this.rolePermissionsForm.id = this.value;
                this.rolePermissionsForm.rules = Array.from(new Set(selectPermissions));
                const { data: res } = await this.$http.post("/sys/role/updatePermissions", this.rolePermissionsForm);
                if (res.data) {
                    this.$message.success("角色权限修改成功!");
                } else {
                    this.$message.error("角色权限修改失败!");
                }
                this.changeHandle();
            },
            // 递归所有选中的权限, 获取对应的权限id
            getIds(nodes, ids) {
                for (let i = 0; i < nodes.length; i++) {
                    let node = nodes[i];
                    ids.push(node.id);
                    if (node.children && node.children.length > 0) {
                        this.getIds(node.children, ids);
                    }
                }
            },
            // 隐藏type=1的node
            handNodeExpand(data, node) {
                if (node.childNodes) {
                    node.childNodes.forEach((item, index, arr) => {
                        item.visible = (item.data.type != 1);
                    });
                }
                this.$nextTick(() => {
                    this.changeCss();
                });
            },
            // 内容区渲染, 标记出最后一层node
            renderContent(h, { node, data, store }) {
                return h("p", { class: node.childNodes.length === 0 ? "foo" : "" }, node.label);
            },
            // 将最后一层node调整为横向
            changeCss() {
                var node = document.getElementsByClassName("foo");
                for (var i = 0; i < node.length; i++) {
                    node[i].parentNode.style.cssFloat = "left";
                    node[i].parentNode.style.styleFloat = "left";
                    node[i].parentNode.onmouseover = function () {
                        this.style.backgroundColor = "#fff";
                    };
                }
            }
        }
    }
</script>

<style lang="less" scoped>

</style>